<div class="enuo-grid">
    <div class="box-tool clearfix" ng-if="config.tool && config.query">
        <div class="btn-group" ng-if="config.tool">
            <a ng-repeat="item in config.tool.items" ng-click="item.click(config.selectedList)" ng-class="item.cssClass" class="btn">
                <i ng-class="item.icon"></i> {{item.name}}
            </a>
        </div>
        <div class="pull-right" ng-if="config.query && config.query.items.length > 0">
            <form class="form-inline">
                <div class="input-group">
                    <div class="pull-left" ng-repeat="item in config.query.items">
                        <div ng-if="item.type=='select'" class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 {{ item.display }} 
                                 <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li ng-repeat="option in item.options" ng-click="fnSelectQuery(option,item)">
                                    <a>{{option.name}}</a>
                                </li>
                            </ul>
                        </div>
                        <input ng-if="item.type=='input'" type="text" ng-model="item.value" class="form-control" placeholder="{{item.placeholder}}" />
                        <input ng-if="item.type=='hideen'" type="hidden" ng-model="item.value" />
                    </div>
                    <span class="input-group-btn pull-left">
                        <button type="submit" ng-click="fnQuery()" class="btn btn-primary">
                            <i class="glyphicon glyphicon-search"></i>
                            {{config.query.action.title || '搜索'}}
                        </button>
                    </span>
                </div>
            </form>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th ng-if="config.pkid" class="check">
                        <input type="checkbox" ng-checked="checkAll" ng-click="fnCheckAll()" />
                    </th>
                    <th ng-repeat="column in config.columns" ng-style="{width:column.width?column.width:'auto'}" ng-click="!column.isSort||onSort(column, config.lastSort)" ng-class="{sort_both:(column.sort=='both'||!column.sort)&&column.isSort, sort_asc:column.sort=='asc'&&column.isSort, sort_desc:column.sort=='desc'&&column.isSort}">{{column.name}}</th>
                </tr>
            </thead>
            <tbody ng-style="contentStyle" ng-if="!config.loading && gridSource.length > 0">
                <tr ng-repeat="item in gridSource track by $index" ng-click="fnCheckItem(item)">
                    <td class="check" ng-if="config.pkid">
                        <input type="checkbox" ng-checked="fnItemChecked(item)" />
                    </td>
                    <td ng-repeat="column in config.columns track by $index" ng-style="{width:column.width?column.width:'auto'}">
                        <enuo-grid-cell column="column" item="item" index="$index" row="$parent.$index"></enuo-grid-cell>
                    </td>
                </tr>
            </tbody>
            <tbody ng-style="contentStyle" ng-if="!config.loading && gridSource.length <= 0">
                <tr>
                    <td colspan="{{columnsCount }}">
                        <empty-result></empty-result>
                    </td>
                </tr>
            </tbody>
            <tbody ng-style="contentStyle" ng-if="config.loading">
                <tr>
                    <td colspan="{{columnsCount }}">
                        <empty-result em-style="loading"></empty-result>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="box-footer" ng-if="config.page">
        <paging page="config.page.pageIndex" class="pull-right paging" page-size="config.page.pageSize" total="config.page.total" paging-action="config.page.callback(page)" show-prev-next="true" show-first-last="true">
        </paging>
    </div>
</div>